<template>
  <div id="app">
    <vue-bpmn style="" product="activiti" @processSave="processSave" :bpmnXml="bpmnXML"></vue-bpmn>
  </div>
</template>

<script>
import VueBpmn from "./components/bpmn/VueBpmn";
import {mapGetters} from 'vuex'

export default {
  name: "App",
  data() {
    return {
      formData: {
        userName: "",
        password: ""
      },
      bpmnXML: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" +
          "<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:activiti=\"http://activiti.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"http://www.activiti.org/processdef\">\n" +
          "  <process id=\"leave-update\" name=\"leave-update\" isExecutable=\"true\">\n" +
          "    <startEvent id=\"start\" name=\"开始\" activiti:initiator=\"applyUserId\" activiti:formKey=\"/flow/leave/apply\" />\n" +
          "    <exclusiveGateway id=\"sid-AA8342FE-0C98-4CDC-B90F-B09B1AFB8F18\" name=\"请假天数\" />\n" +
          "    <sequenceFlow id=\"sid-8022586B-8169-44C2-84FA-46E8278EB2EC\" sourceRef=\"start\" targetRef=\"sid-AA8342FE-0C98-4CDC-B90F-B09B1AFB8F18\" />\n" +
          "    <userTask id=\"pmVerify\" name=\"项目经理审批\" activiti:assignee=\"${pm}\" activiti:formKey=\"/flow/leave/approve\"/>\n" +
          "    <userTask id=\"bmVerify\" name=\"部门经理审批\" activiti:assignee=\"${bm}\" activiti:formKey=\"/flow/leave/approve\" />\n" +
          "    <sequenceFlow id=\"sid-DE7C5477-8C20-42C5-ADE5-AB4A9A13D58D\" name=\"大于3天\" sourceRef=\"sid-AA8342FE-0C98-4CDC-B90F-B09B1AFB8F18\" targetRef=\"bmVerify\">\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${day&gt;3}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <sequenceFlow id=\"sid-B8A78811-23EE-47FA-9913-F04F056EBF99\" name=\"小于等于3天\" sourceRef=\"sid-AA8342FE-0C98-4CDC-B90F-B09B1AFB8F18\" targetRef=\"pmVerify\">\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${day&lt;=3}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <exclusiveGateway id=\"sid-57610114-27FA-4024-94BF-B0FFE4A02E90\" name=\"\" />\n" +
          "    <exclusiveGateway id=\"sid-287EF265-9109-4233-AEF1-14DF6FEF4B24\" name=\"\" />\n" +
          "    <userTask id=\"hrVerify\" name=\"人事审批\" activiti:assignee=\"${hr}\" activiti:formKey=\"/flow/leave/approve\"/>\n" +
          "    <endEvent id=\"end\" />\n" +
          "    <sequenceFlow id=\"sid-3BDD734B-CF1F-4ECA-A234-92BB81132A1E\" name=\"不同意\" sourceRef=\"sid-57610114-27FA-4024-94BF-B0FFE4A02E90\" targetRef=\"end\">\n" +
          "      <extensionElements>\n" +
          "        <activiti:executionListener event=\"take\"  delegateExpression=\"${leaveApplyEndProcessor}\"></activiti:executionListener>\n" +
          "      </extensionElements>\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${approved =='false'}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <exclusiveGateway id=\"sid-76B28F95-2D0C-4364-B898-AB1EC8182879\" name=\"\" />\n" +
          "    <sequenceFlow id=\"sid-31C8FAA6-11F1-4744-99F6-D7DB98AB1B10\" name=\"不同意\" sourceRef=\"sid-76B28F95-2D0C-4364-B898-AB1EC8182879\" targetRef=\"end\">\n" +
          "      <extensionElements>\n" +
          "        <activiti:executionListener event=\"take\"  delegateExpression=\"${leaveApplyEndProcessor}\"></activiti:executionListener>\n" +
          "      </extensionElements>\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${approved =='false'}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <sequenceFlow id=\"sid-63703246-F9C8-4C23-966B-DBC627A81C96\" sourceRef=\"bmVerify\" targetRef=\"sid-287EF265-9109-4233-AEF1-14DF6FEF4B24\" />\n" +
          "    <sequenceFlow id=\"sid-F94C3FB1-CD76-4ED1-BDEC-57B9FCA97E16\" name=\"同意\" sourceRef=\"sid-287EF265-9109-4233-AEF1-14DF6FEF4B24\" targetRef=\"hrVerify\">\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${approved =='true'}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <sequenceFlow id=\"sid-FA244B53-B5C2-41AB-85C6-CB2F40879779\" name=\"同意\" sourceRef=\"sid-57610114-27FA-4024-94BF-B0FFE4A02E90\" targetRef=\"hrVerify\">\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${approved =='true'}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <sequenceFlow id=\"sid-924D40AA-1A8E-4EC9-B73C-41D2A7DEFCCD\" sourceRef=\"pmVerify\" targetRef=\"sid-57610114-27FA-4024-94BF-B0FFE4A02E90\" />\n" +
          "    <sequenceFlow id=\"sid-ED1242F0-B0A6-4677-A02C-D0D06715DEBD\" sourceRef=\"hrVerify\" targetRef=\"sid-76B28F95-2D0C-4364-B898-AB1EC8182879\" />\n" +
          "    <sequenceFlow id=\"sid-B82F41EA-B147-4A19-AD93-A4EC3C40C92E\" name=\"不同意\" sourceRef=\"sid-287EF265-9109-4233-AEF1-14DF6FEF4B24\" targetRef=\"end\">\n" +
          "      <extensionElements>\n" +
          "        <activiti:executionListener event=\"take\"  delegateExpression=\"${leaveApplyEndProcessor}\"></activiti:executionListener>\n" +
          "      </extensionElements>\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${approved =='false'}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "    <sequenceFlow id=\"sid-028073A9-C8C6-4B60-B0AC-6B61B79C17C4\" name=\"同意\" sourceRef=\"sid-76B28F95-2D0C-4364-B898-AB1EC8182879\" targetRef=\"end\">\n" +
          "      <extensionElements>\n" +
          "        <activiti:executionListener event=\"take\"  delegateExpression=\"${leaveApplyEndProcessor}\"></activiti:executionListener>\n" +
          "      </extensionElements>\n" +
          "      <conditionExpression xsi:type=\"tFormalExpression\">${approved =='true'}</conditionExpression>\n" +
          "    </sequenceFlow>\n" +
          "  </process>\n" +
          "  <bpmndi:BPMNDiagram id=\"BPMNDiagram_leave-update\">\n" +
          "    <bpmndi:BPMNPlane id=\"BPMNPlane_leave-update\" bpmnElement=\"leave-update\">\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-8022586B-8169-44C2-84FA-46E8278EB2EC\" bpmnElement=\"sid-8022586B-8169-44C2-84FA-46E8278EB2EC\">\n" +
          "        <omgdi:waypoint x=\"112.75714598551785\" y=\"126.17405584019453\" />\n" +
          "        <omgdi:waypoint x=\"143.71121010641568\" y=\"126.40818009529674\" />\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-DE7C5477-8C20-42C5-ADE5-AB4A9A13D58D\" bpmnElement=\"sid-DE7C5477-8C20-42C5-ADE5-AB4A9A13D58D\">\n" +
          "        <omgdi:waypoint x=\"163.86363505003538\" y=\"106.56060503891644\" />\n" +
          "        <omgdi:waypoint x=\"163.86363505003538\" y=\"53.13651552996619\" />\n" +
          "        <omgdi:waypoint x=\"234.27272508339232\" y=\"53.13651552996619\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"159\" y=\"77\" width=\"40\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-B8A78811-23EE-47FA-9913-F04F056EBF99\" bpmnElement=\"sid-B8A78811-23EE-47FA-9913-F04F056EBF99\">\n" +
          "        <omgdi:waypoint x=\"163.36363505003538\" y=\"146.06060503891644\" />\n" +
          "        <omgdi:waypoint x=\"163.36363505003538\" y=\"189.4949990648568\" />\n" +
          "        <omgdi:waypoint x=\"234.27272508339232\" y=\"189.4949990648568\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"148\" y=\"165\" width=\"62\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-924D40AA-1A8E-4EC9-B73C-41D2A7DEFCCD\" bpmnElement=\"sid-924D40AA-1A8E-4EC9-B73C-41D2A7DEFCCD\">\n" +
          "        <omgdi:waypoint x=\"331.23231804130836\" y=\"189.49499906485684\" />\n" +
          "        <omgdi:waypoint x=\"385.7878751389872\" y=\"189.49499906485684\" />\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-63703246-F9C8-4C23-966B-DBC627A81C96\" bpmnElement=\"sid-63703246-F9C8-4C23-966B-DBC627A81C96\">\n" +
          "        <omgdi:waypoint x=\"326.19171605111364\" y=\"53.34371922706731\" />\n" +
          "        <omgdi:waypoint x=\"371.04578381953866\" y=\"53.54593921607711\" />\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-3BDD734B-CF1F-4ECA-A234-92BB81132A1E\" bpmnElement=\"sid-3BDD734B-CF1F-4ECA-A234-92BB81132A1E\">\n" +
          "        <omgdi:waypoint x=\"425.32578782529805\" y=\"189.957086378546\" />\n" +
          "        <omgdi:waypoint x=\"643.3636579939932\" y=\"189.52287904122937\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"518\" y=\"172\" width=\"33\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-FA244B53-B5C2-41AB-85C6-CB2F40879779\" bpmnElement=\"sid-FA244B53-B5C2-41AB-85C6-CB2F40879779\">\n" +
          "        <omgdi:waypoint x=\"410.4195073141635\" y=\"174.12663124003316\" />\n" +
          "        <omgdi:waypoint x=\"446.39393516122516\" y=\"123.49474452854777\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"417\" y=\"131\" width=\"23\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-F94C3FB1-CD76-4ED1-BDEC-57B9FCA97E16\" bpmnElement=\"sid-F94C3FB1-CD76-4ED1-BDEC-57B9FCA97E16\">\n" +
          "        <omgdi:waypoint x=\"396.41667858914667\" y=\"67.35619707424723\" />\n" +
          "        <omgdi:waypoint x=\"446.39393516122516\" y=\"100.69330097746277\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"410\" y=\"66\" width=\"23\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-B82F41EA-B147-4A19-AD93-A4EC3C40C92E\" bpmnElement=\"sid-B82F41EA-B147-4A19-AD93-A4EC3C40C92E\">\n" +
          "        <omgdi:waypoint x=\"410.23752422668827\" y=\"53.53535143670566\" />\n" +
          "        <omgdi:waypoint x=\"704.9797941833938\" y=\"53.53535143670566\" />\n" +
          "        <omgdi:waypoint x=\"704.9797941833938\" y=\"190.5669944706311\" />\n" +
          "        <omgdi:waypoint x=\"671.3600836513306\" y=\"189.81010495572275\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"703\" y=\"119\" width=\"33\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-ED1242F0-B0A6-4677-A02C-D0D06715DEBD\" bpmnElement=\"sid-ED1242F0-B0A6-4677-A02C-D0D06715DEBD\">\n" +
          "        <omgdi:waypoint x=\"542.3536331797492\" y=\"111.73247557218357\" />\n" +
          "        <omgdi:waypoint x=\"567.6060552057011\" y=\"111.73247557218357\" />\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-31C8FAA6-11F1-4744-99F6-D7DB98AB1B10\" bpmnElement=\"sid-31C8FAA6-11F1-4744-99F6-D7DB98AB1B10\">\n" +
          "        <omgdi:waypoint x=\"589.3360756732812\" y=\"130.00245510460337\" />\n" +
          "        <omgdi:waypoint x=\"646.8251334621888\" y=\"180.27870448400202\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"602\" y=\"137\" width=\"33\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNEdge id=\"BPMNEdge_sid-028073A9-C8C6-4B60-B0AC-6B61B79C17C4\" bpmnElement=\"sid-028073A9-C8C6-4B60-B0AC-6B61B79C17C4\">\n" +
          "        <omgdi:waypoint x=\"607.1060552057011\" y=\"112.23247557218357\" />\n" +
          "        <omgdi:waypoint x=\"657.3636302334985\" y=\"112.23247557218357\" />\n" +
          "        <omgdi:waypoint x=\"657.3636302334985\" y=\"175.49499906485684\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"621\" y=\"94\" width=\"23\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNEdge>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_startEvent1\" bpmnElement=\"start\">\n" +
          "        <omgdc:Bounds x=\"83\" y=\"111\" width=\"30\" height=\"30\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"87\" y=\"148\" width=\"22\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-AA8342FE-0C98-4CDC-B90F-B09B1AFB8F18\" bpmnElement=\"sid-AA8342FE-0C98-4CDC-B90F-B09B1AFB8F18\" isMarkerVisible=\"true\">\n" +
          "        <omgdc:Bounds x=\"143\" y=\"106\" width=\"40\" height=\"40\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"217\" y=\"116\" width=\"44\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-815754A6-1E86-43E5-8287-6D2A1DF59121\" bpmnElement=\"pmVerify\">\n" +
          "        <omgdc:Bounds x=\"234\" y=\"167\" width=\"97\" height=\"46\" />\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-1E8B3F37-4DF8-459A-921C-74F2C210E3E2\" bpmnElement=\"bmVerify\">\n" +
          "        <omgdc:Bounds x=\"234\" y=\"30\" width=\"92\" height=\"46\" />\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-57610114-27FA-4024-94BF-B0FFE4A02E90\" bpmnElement=\"sid-57610114-27FA-4024-94BF-B0FFE4A02E90\" isMarkerVisible=\"true\">\n" +
          "        <omgdc:Bounds x=\"386\" y=\"169\" width=\"40\" height=\"40\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"384\" y=\"216\" width=\"44\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-287EF265-9109-4233-AEF1-14DF6FEF4B24\" bpmnElement=\"sid-287EF265-9109-4233-AEF1-14DF6FEF4B24\" isMarkerVisible=\"true\">\n" +
          "        <omgdc:Bounds x=\"371\" y=\"33\" width=\"40\" height=\"40\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"369\" y=\"80\" width=\"44\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-A9CA50A0-1773-4341-B123-85FD1F360277\" bpmnElement=\"hrVerify\">\n" +
          "        <omgdc:Bounds x=\"446\" y=\"91\" width=\"96\" height=\"42\" />\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-1B06331A-52FE-4D1B-A62B-80E71ABB7D0E\" bpmnElement=\"end\">\n" +
          "        <omgdc:Bounds x=\"643\" y=\"175\" width=\"28\" height=\"28\" />\n" +
          "      </bpmndi:BPMNShape>\n" +
          "      <bpmndi:BPMNShape id=\"BPMNShape_sid-76B28F95-2D0C-4364-B898-AB1EC8182879\" bpmnElement=\"sid-76B28F95-2D0C-4364-B898-AB1EC8182879\" isMarkerVisible=\"true\">\n" +
          "        <omgdc:Bounds x=\"568\" y=\"92\" width=\"40\" height=\"40\" />\n" +
          "        <bpmndi:BPMNLabel>\n" +
          "          <omgdc:Bounds x=\"566\" y=\"139\" width=\"44\" height=\"14\" />\n" +
          "        </bpmndi:BPMNLabel>\n" +
          "      </bpmndi:BPMNShape>\n" +
          "    </bpmndi:BPMNPlane>\n" +
          "  </bpmndi:BPMNDiagram>\n" +
          "</definitions>"
    }
  },
  components: {
    VueBpmn
  },
  computed: {
    ...mapGetters([
      "getUserList"
    ])
  },
  methods: {
    login() {
      if (!this.formData.userName) {
        this.$message.warning("用户名不能为空")
        return false;
      }
      if (!this.formData.password) {
        this.$message.warning("密码不能为空")
        return false;
      }
      let loginUser = this.getLoginUser(this.formData.userName);
      if (!loginUser || loginUser.password != this.formData.password) {
        this.$message.warning("用户名或密码错误")
        return false;
      }
      localStorage.setItem("loginUser", JSON.stringify(loginUser))
      localStorage.setItem("token", new Date().getTime() + "")
      this.$router.push({
        name: 'main'
      })
    },
    getLoginUser(userName) {
      let userList = this.getUserList;
      for (let index = 0; index < userList.length; index++) {
        let user = userList[index];
        if (userName == user.userName) {
          return user;
        }
      }
      return null;
    },
    processSave(data) {
      let that = this;
      that.post(this.Apis.processBuffer, data, res => {
        if (res.code == 200) {
          that.$refs.elementTable.reload();
        }
      })
    }
  }
}
</script>

<style scoped>
.el-header, .icon-denglu1 {
  font-size: 20px;
  color: #666666;
}

.el-row {
  margin-bottom: 5px;
  font-size: 14px;
  color: #777777;
}

</style>